import React, {JSX} from "react";
import {Image, View} from "@tarojs/components";
import './index.scss'

export interface ICouponItem {
  id: number,
  rechargemoney: number,
  givemoney: number,
}

interface ICoupons {
  list: Array<any>
}

export const CouponItem: React.FC<{ item: ICouponItem }> = ({item}): JSX.Element => {
  return (
    <View className='CouponItem'>
      <Image lazyLoad src={require('@/static/images/index/List/coupon.png')}></Image>
      <View className='left align-center'>
        <View className='rechargemoney'>{item.rechargemoney}</View>
        <View className='operator'>&nbsp;元</View>
        <View className='givemoney'>赠送{item.givemoney}元</View>
      </View>
      <View className='button align-center justify-center'>去充值</View>
    </View>
  )
}

const Coupons: React.FC<ICoupons> = ({list}): JSX.Element => {
  return (
    <View className='Coupons'>
      <View className='wrap'>
        {list.map(item => (
          <CouponItem key={item.id} item={item}></CouponItem>
        ))}
      </View>
    </View>
  )
}

export default Coupons;
